<template>
    <div>
        <dv-full-screen-container v-if="isFull">

        </dv-full-screen-container>

        <div class="main-content" v-else>
            <dv-border-box-10 class="main-content-top">
                <el-select @change="changeStuYear" v-model="selectedStuYear" size="mini" class="main-content-top-select">
                    <el-option v-for="(v, i) in stuYearList" :key="i" :label="v.stuYearName" :value="v.id"></el-option>
                </el-select>
                学生综合素质成绩数据大屏
                <!-- <i class="el-icon-sort" @click="isFull = !isFull"></i> -->
            </dv-border-box-10>
            <dv-loading v-if="loading" style="color: white; font-weight: bolder;">Loading...</dv-loading>

            <el-row>
                <el-col :span="12">
                    <dv-border-box-11 title="成绩分布" style="margin-top: 20px;height: 420px;">
                        <el-row>
                            <el-col :span="12">
                                <dv-active-ring-chart :config="scoreDis" style="width:350px;height:350px" />
                            </el-col>
                            <el-col :span="12">
                                <dv-active-ring-chart :config="scoreDetailDis" style="width:350px;height:350px;" />
                            </el-col>
                        </el-row>
                    </dv-border-box-11>
                </el-col>
                <el-col :span="12">
                    <dv-border-box-11 title="成绩排名" style="margin-top: 20px;">
                        <div style="position: relative;top: 60px;left: 60px;height: 420px;">
                            <el-form>
                                <el-form-item label="专业/班级">
                                    <el-select @change="changeGrade" v-model="selectedGrade" placeholder="请选择年级"
                                        style="width: 150px;">
                                        <el-option v-for="(v, i) in gradeList" :key="i" :label="v.gradeName"
                                            :value="v.gradeId">
                                        </el-option>
                                    </el-select>
                                    <el-cascader placeholder="请选择专业或者班级" v-model="class_cas" ref="cas" style="width: 370px;"
                                        :options="cascaderData" :props="{ checkStrictly: true }" @change="handleChange"
                                        clearable filterable :show-all-levels="false"></el-cascader>

                                </el-form-item>
                            </el-form>
                            <dv-scroll-ranking-board ref="rankDis" :config="rankData"
                                style="width:500px;height:300px;position: relative;top: -20px;" />
                        </div>
                    </dv-border-box-11>

                </el-col>
            </el-row>

        </div>

    </div>
</template>
<script>
import { listAllYear as listYear } from "@/api/stuCQS/basedata/year";

// import { listYear } from "@/api/stuCQS/basedata/year";
import { isEmpty } from "@/api/helpFunc";
import { countScoreDis, countScoreDetailDis, rankDis } from "@/api/stuCQS/info-fill/cqScore";
import lodash from "lodash";
import { treeStudent } from "@/api/stuCQS/basedata/student";
import { listGrade } from "@/api/stuCQS/basedata/grade";


export default {
    name: "dataScreen",
    data() {
        return {
            loading: true,
            selectedStuYear: null,
            selectedGrade: null,
            gradeList: [],
            stuYearList: [],

            scoreDis: {
                data: [],
                radius: '45%',
                activeRadius: '50%',
                digitalFlopStyle: {
                    fontSize: 20
                },
                showOriginValue: true
            },

            scoreDetailDis: {
                data: [],
                radius: '45%',
                activeRadius: '50%',
                digitalFlopStyle: {
                    fontSize: 16
                },
                showOriginValue: true,
                activeTimeGap: 2000
            },

            isFull: false,

            class_cas: [],
            cascaderData: null,

            rankData: {
                data: [
                    {
                        name: "暂无",
                        value: 0
                    }
                ],
                sort: false,
                valueFormatter(x) {
                    let name = "成绩:" + x.value;
                    return name;
                }
            },
            queryParams: {

            }

        }
    },
    created() {
        this.init();

    },
    mounted() {

    },
    methods: {
        changeGrade() {
            this.rankDis();
        },
        async listGrade() {
            let res = await listGrade();
            if (res.code == 200) {
                this.gradeList = [...res.rows];
                this.selectedGrade = [...res.rows][0].gradeId;
            }
        },
        handleChange(value) {
            this.queryParams = {
                stuYearId: this.selectedStuYear,
                gradeId: this.selectedGrade,
                deptId: value[0],
                majorId: value[1],
                classId: value[2]
            }
            this.rankDis();
        },
        async init() {
            await this.listStuYear();
            await this.getCascaderData();
            await this.listGrade();
            this.initCharts();
        },
        async rankDis() {
            let thisDom = this.$refs.rankDis;
            console.log(111,thisDom);

            this.queryParams.stuYearId = this.selectedStuYear;
            this.queryParams.gradeId = this.selectedGrade;
            let sdata = { ...this.queryParams };
            let res = await rankDis(sdata);
            if (res.code == 200) {
                let data = [...res.data];
                if (data.length != 0) {
                    this.rankData.data = data;
                    let temp = lodash.cloneDeep(this.rankData);
                    this.rankData = lodash.cloneDeep(temp);
                } else {
                    this.rankData.data = [{
                        name: "暂无",
                        value: 0
                    }];
                    let temp = lodash.cloneDeep(this.rankData);
                    this.rankData = lodash.cloneDeep(temp);
                }

            }
        },
        async initCharts() {
            this.loading = true;
            await this.countScoreDis();
            await this.countScoreDetailDis();
            await this.rankDis();
            this.loading = false;
        },
        async listStuYear() {
            let res = await listYear();
            if (res.code == 200) {
                let data = [...res.data];
                this.stuYearList = [...data];
                if (data.length != 0) {
                    this.selectedStuYear = data[0].id;
                }
            }
        },
        async getCascaderData() {
            let res = await treeStudent();
            let temp = [];
            temp[0] = res.data[0].value;
            temp[1] = res.data[0].children[0].value;
            temp[2] = res.data[0].children[0].children[0].value;
            this.queryParams = {
                stuYearId: this.selectedStuYear,
                gradeId: this.selectedGrade,
                deptId: temp[0],
                majorId: temp[1],
                classId: temp[2]
            }
            this.class_cas = [...temp];
            this.cascaderData = res.data;
            this.cascaderData.forEach(dept => {
                dept.children.forEach(major => {
                    major.children.forEach(c => {
                        delete c.children
                    })
                })
            });
        },
        async countScoreDis() {
            this.scoreDis = {
                data: [
                    {
                        name: "无",
                        value: 0
                    }
                ],
                radius: '45%',
                activeRadius: '50%',
                digitalFlopStyle: {
                    fontSize: 20
                },
                showOriginValue: true
            };

            let res = await countScoreDis(this.selectedStuYear);

            if (res.code == 200) {
                let data = res.data;
                let bool = false;
                data.map(x => {
                    if (x.value != 0) {
                        bool = true;
                    }
                });
                if (bool) {
                    this.scoreDis.data = [...res.data];
                    this.scoreDis = { ...this.scoreDis };
                }

            }
        },
        async countScoreDetailDis() {
            this.scoreDetailDis = {
                data: [
                    {
                        name: "无",
                        value: 0
                    }
                ],
                radius: '45%',
                activeRadius: '50%',
                digitalFlopStyle: {
                    fontSize: 16
                },
                showOriginValue: true,
                activeTimeGap: 2000
            };

            let res = await countScoreDetailDis(this.selectedStuYear);
            if (res.code == 200) {
                let data = res.data;
                let bool = false;
                data.map(x => {
                    if (x.value != 0) {
                        bool = true;
                    }
                });
                if (bool) {
                    this.scoreDetailDis.data = [...res.data];
                    this.scoreDetailDis = { ...this.scoreDetailDis };
                }

            }

        },
        async changeStuYear() {
            let temp = this.selectedStuYear;
            this.selectedStuYear = temp;
            await this.initCharts();
            console.log(this.scoreDis);
            console.log(this.scoreDetailDis);
        }

    }
}
</script>
<style scoped lang="scss">
::v-deep .main-content-top-select .el-icon-arrow-up:before {
    content: ''
}

::v-deep .el-input.el-input--suffix {

    // 修改背景颜色、字体颜色、边框、宽高
    .el-input__inner {
        background: rgba(0, 0, 0, 0) !important;
        border: none;
        color: white;
        // height: 30px;
        // width: 140px;
    }

    // 符号的位置会错乱，进行修正（水平）
    .el-input__suffix-inner {
        position: absolute;
        left: -25px;
    }

    // 符号的位置会错乱，进行修正（垂直）
    .el-select__caret.el-input__icon.el-icon-arrow-up {
        line-height: 30px;

    }

    .el-input__inner::placeholder {
        color: white;
    }

    .el-icon-arrow-up:before {
        color: white;
    }
}

.main-content {
    background-color: rgb(40, 44, 52);
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    padding: 10px;

    .main-content-top {
        width: 80vh;
        height: 8vh;
        margin: 0 auto;
        line-height: 8vh;
        text-align: center;
        color: white;

        .main-content-top-select {
            width: 140px;
        }
    }
}
</style>